article {
  width: 100%;
  max-width: 900px;
  margin: 20px auto 30vh;
  background: #fff;
  padding: 2em;

  &.documentation,
  &.tutorial {

    .main {
      max-width: 100%;
    }

    .source {
      float: right;
      margin: -5px;
    }

    @media all and (min-width: $picnic-breakpoint) {
      margin-top: 50px;

      .flex {
        width: 100%;
        margin: 0;
      }
      .toc {
        width: 28%;
        margin-right: 2%;
      }
      .main {
        width: 70%;
      }
    }
  }

  .features {
    margin: 20px 0 30px;
    text-align: center;

    img {
      margin: 10px auto -5px;
      width: 90px;
      display: block;
      filter: opacity(.8);
    }

    h2 {
      padding-top: 0;
    }

    p {
      margin: 0 auto;
    }

    @media all and (min-width: 600px) {
      img {
        margin: 0 auto;
        width: 100px;
      }
      p {
        width: 90%;
        margin: 0 auto;
      }
    }
  }

  img {
    max-width: 100%;
  }


  /* p only if it's the first elementc */
  & > p:first-child {
    margin-top: 0;
  }

  /*tighten up*/
  h1,
  h2,
  h3 {
    margin: 0;
    padding-top: 25px;
    padding-bottom: 0;

    a {
      color: inherit;
    }

    a:hover {
      color: #0074d9;
    }
  }

  .self {
    float: right;
    margin-right: 5px;
  }

  h1 {
    margin-top: -106px;
    padding-top: 100px;
    line-height: 1.1;
  }

  h1 + *,
  h2 + *,
  h3 + * {
    margin-top: .6em;
  }

  table {
    margin: 1.5em 0 .5em;
    width: 100%;
    max-width: 100%;

    td, th {
      padding: .3em .6em;
    }

    th {
      background: none;
      color: #333;
    }

    tr:nth-child(2n) {
      background: none;
    }

    th,
    td {
      border: 2px solid #ddd;
    }
  }

  .pages {
    text-align: left;
  }
}



// Responsive spacing
@media all and (max-width: 900px) {
  article {
    padding: $rspacing;
    width: 100%;
    border-radius: 0;

    table {
      display: block;
      overflow-x: auto;
    }
  }
}
